<template>
  <div class="hello">
    <van-grid :border="false" :column-num="3" class="grid">
        <van-grid-item
          v-for="(item, index) in gridItems"
          :key="index"
          class="card"
          @click="selectItem(index)"
          :class="{ selected: selectedIndex === index }"
        >
          <template >
            <van-badge :content="item.count&&item.count>0?item.count:''">
              <div style="padding:5px">{{ item.name }}</div>
            </van-badge>
          </template>
        </van-grid-item>
      </van-grid>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    dataCount: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      gridItems: [{
        name: '服务卡',
        count: undefined,
        type: 'serviceCardWaitAuditCount'
      },
      {
        name: '大单优惠',
        count: undefined,
        type: 'largeOrderDiscountWaitAuditCount'
      },
      {
        name: '包保',
        count: undefined,
        type: 'packageGuaranteeWaitAuditCount'
      },
      {
        name: '光纤',
        count: undefined,
        type: 'fiberWaitAuditCount'
      },
      {
        name: '酒盟',
        count: undefined,
        type: 'wineAllianceWaitAuditCount'
      },
      {
        name: '项目赠送',
        count: undefined,
        type: 'projectGiftWaitAuditCount'
      }],

      selectedIndex: 0
    }
  },
  mounted() {
    this.updateGridItemCounts()
  },
  methods: {
    selectItem(index) {
      this.$emit('select', this.gridItems[index]);
      this.selectedIndex = index;
      console.log('this.selectedIndex',this.selectedIndex)
    },
    updateGridItemCounts() {
      for (let key in this.dataCount) {
        this.gridItems.forEach((item) => {
          if (item.type === key) {
            item.count = this.dataCount[key];
          }
        }); 
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.card {
  border: 1px solid #EEE
}
/* grid下第一二三个去掉上方边框 四五六去掉下边框*/
.grid .van-grid-item:nth-child(1),
.grid .van-grid-item:nth-child(2),
.grid .van-grid-item:nth-child(3) {
  border-top: none;
}
.grid .van-grid-item:nth-child(4),
.grid .van-grid-item:nth-child(5),
.grid .van-grid-item:nth-child(6) {
  border-bottom: none;
}
.grid .van-grid-item:nth-child(1),
.grid .van-grid-item:nth-child(4){
  border-left: none;
}
.grid .van-grid-item:nth-child(3),
.grid .van-grid-item:nth-child(6){
  border-right: none;
}
.selected {
  color: blue;
}
</style>
